<template>
  <div id="app">
    <pageLoading />
    <pageWechat v-show="!is_wechat" />
    <transition v-if="this.$store.state.setting.page_loading && is_wechat" :name="transitionName">
      <!-- <keep-alive exclude="footerVue,tabbar,tabbar-item,headerVue,match_inc"> -->
      <keep-alive include="index">
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { isDing } from './config/dd'


import pageLoading from "./components/common/pageLoading";
import pageWechat from "./components/common/pageWechat";
import store from './store';
export default {
  name: "App",
  data() {
    return {
      is_wechat: false,
      is_loading: false,
      loading_text: "",
      transitionName: "",
    };
  },
  components: {
    pageLoading,
    pageWechat,
  },
  watch: {
    $route(to, from) {
      // const toDepth = to.path.split("/").length;
      // const fromDepth = from.path.split("/").length;
      // this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left";

      if (to.meta.index > from.meta.index) {
        // 设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },

  async created() {
    // 如果是钉钉则获取系统配置
    // if (isDing()) {
    await this.$axios.post("h5appapi/ding/jsapiconfig", {}).then(res => {
      // console.log(res)
      if (res.code == 20000) {
        this.$store.commit("setApiSetting", res.config);
      }
      if (res.code != 20000) {
        console.log(res)
        this.$toast({
          position: 'bottom',
          message: res.message
        });
        return false;
      }
    })

    // }

    console.log(this.$route);
    this.isWenXin();
    this.is_wechat = true;
    if (!this.is_wechat) {
      this.$store.commit("setSettings", {
        page_loading: true,
      });
    }
    //开发模式禁止加载页面
    if (process.env.NODE_ENV == "development") {
      this.$store.commit("setSettings", {
        page_loading: true,
      });
    }
  },
  methods: {
    isWenXin: function () {
      if (process.env.NODE_ENV != "development") {
        if (
          navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1
        ) {
          this.is_wechat = true; // 是微信端
        } else {
          this.is_wechat = false;
        }
      } else {
        this.is_wechat = true;
      }

      console.log(this.is_wechat);
    },
    isMobile: function () {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
  },
  mounted() {
    //100毫秒秒后解除加载页面
    setTimeout(() => {
      this.$store.commit("setSettings", { page_loading: true });
    }, 100);
    //解决ios系统键盘回弹问题
    document.body.addEventListener("focusout", () => {
      window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
    });
    // page_loading
  },
};
</script>

<style lang="stylus">
#app {
  overflow: hidden;
}

.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

input[type='button'], input[type='submit'], input[type='reset'], button {
  -webkit-appearance: none;
}

textarea {
  -webkit-appearance: none;
}

.focusStateInput {
  .focusState {
    position: absolute;
  }
}

img {
  position: relative;
}

img::after {
  content: '';
  display: inline-block;
  position: absolute;
  // z-index: 2;
  top: 0;
  left: 44%;
  width: 12%;
  height: 145px;
  background: url('~@/assets/img/loading.gif') no-repeat;
  background-size: 100%;
  background-color: #fff;
}
</style>

